<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单验证</title>
</head>

<body>


    <div style="margin: 100px auto;text-align: center;">
        <input id="text" type="text"> <span id="flag"></span>
    </div>






</body>

<script>
    var text = document.getElementById('text');
    var flag = document.getElementById('flag');
    // 获取焦点
    text.onfocus = function() {
            flag.innerHTML = '请输入至少6~11位数字';
            flag.style.color = 'blue';
            flag.style.fontSize = '15px'
        }
        // 失去焦点
    text.onblur = function() {
        var a = this.value;
        if (a.length < 6 || a.length > 11) {
            flag.innerHTML = '至少6~11位数字';
            flag.style.color = 'red';
            flag.style.fontSize = '15px'
        } else {
            flag.innerHTML = '符合标准';
            flag.style.color = 'green';
            flag.style.fontSize = '15px'
        }
    }
</script>

</html>